<template>
  <div style="padding: 30px 0;margin-bottom: 20px">
    <div class="header">
      <nav>
        <div class="logo" style="cursor: pointer;">
          <div class="logoBox">
            <NuxtLink :to="'/'">
              <el-image class="img" style="width: 50px;border-radius: 50%; height: 45px;"
                        src="https://file.qcycloud.xyz/cdedb6c096724ae1b8b34cdf54006272.png">
              </el-image>
              <a href="javascript:;">沐雨橙风</a>
            </NuxtLink>

          </div>
          <!-- 手机端导航栏 -->
          <span v-if="isMobile" style="position: absolute;left: 10px;">
                    <!-- <a @click="openSearch"><i class="iconfont iconsousuo" /></a> -->
                    <a @click="openDrawer" style="font-size:20px">
                        <i class="iconfont icon-menu_normal" style="font-size: 1.5rem;"/>
                    </a>
                </span>
          <!-- 手机端搜索栏 -->
          <span v-if="isMobile" style="position: absolute;right: 10px;">
                    <!-- <a @click="openSearch"><i class="iconfont iconsousuo" /></a> -->
                    <a @click="openSearchDrawer" style="font-size:20px">
                        <i class="iconfont icon-search" style="font-size: 1.5rem;;"/>
                    </a>
                </span>
        </div>

        <ul class="starlist">
          <li>
           <span>
             <NuxtLink :class="path == '/' ? 'active' : ''" :to="'/'">
                            首页
             </NuxtLink>
           </span>
          </li>
          <li>
           <span>
             <NuxtLink :class="path == '/archive' ? 'active' : ''" :to="'/archive'">
                            文章归档
             </NuxtLink>
           </span>
          </li>
          <li>
           <span>
             <NuxtLink :class="path == '/categorys' ? 'active' : ''" :to="'/categorys'">
                            分类
             </NuxtLink>
           </span>
          </li>
          <li>
           <span>
             <NuxtLink :class="path == '/tag' ? 'active' : ''" :to="'/tag'">
                            标签
             </NuxtLink>
           </span>
          </li>
<!--          <li>
            <el-dropdown trigger="click">
              <span class="el-dropdown-link">
                文章归档
                <el-icon :size="16" >
                  <ArrowDown />
                </el-icon>
              </span>
              <template #dropdown>
                <el-dropdown-menu>
                  <nuxt-link :to="'/archive'">
                    <el-dropdown-item>归档</el-dropdown-item>
                  </nuxt-link>
                  <nuxt-link to="/categorys">
                    <el-dropdown-item>分类</el-dropdown-item>
                  </nuxt-link>
                  <nuxt-link to="/tag">
                    <el-dropdown-item>标签</el-dropdown-item>
                  </nuxt-link>

                </el-dropdown-menu>
              </template>
            </el-dropdown>
          </li>-->

<!--          <li>
           <span>
             <NuxtLink style="color: red;" :class="path == '/sponsor' ? 'active' : ''" :to="'/sponsor'">
                            打赏名单
             </NuxtLink>
           </span>
          </li>

          <li>
          <span>
            <NuxtLink :class="path == '/photo' ? 'active' : ''" :to="'/photo'">
              画廊
            </NuxtLink>
          </span>
          </li>

          <li>
          <span>
            <NuxtLink :class="path == '/note' ? 'active' : ''" :to="'/note'">
                            笔记
            </NuxtLink>
          </span>
          </li>

          <li>
          <span>
            <NuxtLink :class="path == '/hot' ? 'active' : ''" :to="'/hot'">
              热搜
            </NuxtLink>
          </span>
          </li>
          <li>
          <span>
            <NuxtLink :class="path == '/message' ? 'active' : ''" :to="'/message'">
              留言板
            </NuxtLink>
          </span>
          </li>-->
          <li>
          <span>
            <NuxtLink :class="path == '/links' ? 'active' : ''" :to="'/links'">
              友情链接
            </NuxtLink>
          </span>
          </li>
          <li>
           <span>
             <NuxtLink :class="path == '/about' ? 'active' : ''" :to="'/about'">
                            关于本站
             </NuxtLink>
           </span>
          </li>
<!--          <li>
            <el-dropdown trigger="click">
              <span class="el-dropdown-link">
                关于本站
                <el-icon :size="16" >
                  <ArrowDown />
                </el-icon>
              </span>
              <template #dropdown>
                <el-dropdown-menu>
                  <nuxt-link to="/about">
                    <el-dropdown-item>关于本站</el-dropdown-item>
                  </nuxt-link>

                </el-dropdown-menu>
              </template>
            </el-dropdown>
          </li>-->

        </ul>

<!--        <div class="searchBox" v-show="!noneInput">
          <div class="search_bar search_open">
            <el-input @focus="focus" @blur="blur" type="text" v-model="keywords" placeholder="想搜点什么呢..."/>
            <p class="search_ico" @click="search()">
              <i class="iconfont icon-search"></i>
            </p>
          </div>
          &lt;!&ndash; 热搜框 &ndash;&gt;
          <div class="hot_search_main" :style="style">
            <a @click="handleArticle(item.id)" href="javascript:;"
            >
              <span :style="{ backgroundColor: `${colors[0]}` }">1</span>
              1
            </a>
          </div>
        </div>
        <div class="articleBtn">
          <el-button size="small" @click="addArticle" type="primary">发表文章</el-button>
        </div>

        <div class="userInfo">
          <el-dropdown trigger="hover">
            <div class="el-dropdown-link">
              <img v-if="!userInfo.avatar" src="http://img.shiyit.com/touristAvatar.png" alt="">
              <img v-else :src="userInfo.avatar" alt=""/>
            </div>
            <template #dropdown>
              <el-dropdown-menu v-if="userInfo.avatar">
                <el-dropdown-item>
                  <span @click="openUserInfoDrawer">个人中心</span>
                </el-dropdown-item>
                <el-dropdown-item><a href="javascript:;" @click="logout"
                                     style="text-decoration: none;color: #71777c;">退出登录</a>
                </el-dropdown-item>
              </el-dropdown-menu>
              <el-dropdown-menu slot="dropdown">
                <div class="loginTip" style="padding: 10px;">
                  <p>登录网站，获取以下权益</p>
                  <div style="margin-top: 10px;">

                                <span>
                                    <i class="el-icon-cloudy"></i> 参与互动评论
                                </span>

                    <span style="margin-left: 10px;">
                                    <i class="el-icon-cloudy"></i> 发表优质文章
                                </span>
                  </div>
                  <el-button @click="handleLogin()" style="margin:  0 auto;display: block;margin-top: 10px;"
                             type="success" size="small">立即登录
                  </el-button>
                </div>
              </el-dropdown-menu>
            </template>



          </el-dropdown>
        </div>-->

      </nav>
    </div>
  </div>
</template>
<script setup>

import {ref,reactive,onMounted,computed,watch} from 'vue'
import {useStore} from "@/store";
const route = useRoute();


const isMobile = ref(false);
const colors = ref(["#FE2D46", "#FF6600", "#FAA90E", "#7f7f8c", "#7f7f8c"]);
const noneInput = ref(false)
const commonStore = useStore();
const path = computed(()=>commonStore.routerPath);
const userInfo = reactive({
  avatar: ''
})
/*watch(()=>route.path,(value, oldValue, onCleanup)=>{
  console.log(value);
  commonStore.setRouterPath(value);
})*/
const handleLogin = ()=>{

}
const openUserInfoDrawer = ()=>{

}
const addArticle = ()=>{

}
const openDrawer = ()=>{
  commonStore.setDrawer(true)
}
onMounted(()=>{
  let width = document.documentElement.clientWidth;

  isMobile.value = width < 1119
  noneInput.value = width < 1410
  window.addEventListener('resize',(e)=>{
    let width = document.documentElement.clientWidth;

    isMobile.value = width < 1119
    noneInput.value = width < 1410
    console.log(isMobile.value)
  })
})

</script>
<style scoped lang="scss">
:deep(.el-dropdown) {
  line-height: 60px;
}
@media screen and (max-width: 1118px) {
  .header {
    position: fixed;
    top: 0;
    width: 100%;
    line-height: 60px;
    z-index: 99;
    background-color: var(--header-back-color);

    a {
      text-decoration: none;
    }

    nav {
      width: 100%;
      margin: auto;
      overflow: hidden;
      max-width: 1500px;

      .logo {
        font-size: 22px;
        font-weight: 700;
        width: 100%;
        position: relative;
        display: flex;

        .logoBox {
          height: 60px;
          display: flex;
          align-items: center;
          margin-left: 20px;
          position: relative;
          margin: 0 auto;
        }

        .img {
          width: 80px;
          height: 40px;
          vertical-align: middle;
          margin-top: -6px;
        }

        a {
          margin-left: 10px;
          color: var(--theme-color);
        }
      }



      .starlist {
        display: none;
      }

      .searchBox,
      .articleBtn,
      .starlist,
      .userInfo {
        display: none;
      }
    }
  }
}



@media screen and (min-width: 1119px) {

  /*针对宽度小于等于767px的屏幕设备，定义如下样式*/
  .slideDown {
    transition: transform .5s ease-out;
    transform: translateY(0);
  }

  .slideUp {
    transition: transform .5s ease-out;
    transform: translateY(-100px);
  }

  .header {
    position: fixed;
    top: 0;
    width: 100%;
    line-height: 60px;
    z-index: 99;
    background-color: var(--header-back-color);
    backdrop-filter: blur(4px);

    a {
      text-decoration: none;
    }

    nav {
      width: 100%;
      margin: auto;
      overflow: hidden;
      max-width: 1500px;

      .logo {
        float: left;
        font-size: 22px;
        font-weight: 700;

        .img {
          width: 80px;
          height: 40px;
          vertical-align: middle;
          margin-top: -6px;
        }

        a {
          margin-left: 10px;
          color: var(--theme-color);
        }
      }

      .starlist {
        display: block;
        float: left;
        margin-left: 50px;
        overflow: hidden;
        max-width: 1500px;

        .el-dropdown-link {
          cursor: pointer;
          display: flex;
          align-items: center;
        }

        li {
          float: left;
          display: block;
          font-size: 14px;
          padding: 0 15px;

          .active {
            color: var(--theme-color);
          }

          a {
            color: #71777c;

            &:hover {
              color: var(--theme-color);
            }
          }

        }
      }

      .searchBox {
        position: absolute;
        right: 340px;
        top: 0;
        display: flex;
        -ms-flex-direction: column;
        flex-direction: column;

        .search_open {
          width: 200px;
          display: inline-block;
          padding-left: 10px;
          height: 60px;

          :deep(.el-input__inner) {
            //border: 1px solid var(--input-boder);
            background: var(--background-color);
            width: 210px;
            padding-left: 8px;
            height: 35px;
            border-radius: 20px;
            transition: all 2s;
          }


        }

        .search_ico {
          position: absolute;
          right: 5px;
          top: 0;
          padding: 0;
          margin: 0;
          line-height: 60px;
          cursor: pointer;
          text-align: right;

          .iconfont {
            font-size: 20px;
            font-weight: 700;
          }
        }

        .hot_search_main {
          background-color: var(--background-color);
          border-radius: 4px;
          box-shadow: 0 0 10px rgba(0, 0, 0, .5);
          position: absolute;
          z-index: 99;
          top: 50px;
          left: 10px;
          right: -10px;
          opacity: 0;
          visibility: hidden;
          transition: visibility .35s, opacity .35s, transform .35s;
          transform: translate3d(0, 15px, 0);

          a {
            height: 30px;
            text-decoration: none;
            display: block;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            /* border-bottom: 1px solid #f2f6fc; */
            line-height: 30px;
            padding: 4px 5px;
            color: #606266;
            font-size: 12px;

            span {
              width: 20px;
              height: 20px;
              display: inline-block;
              line-height: 21px;
              text-align: center;
              border-radius: 3px;
              color: var(--background-color);

            }

            &:first-child {
              border-top-left-radius: 4px;
              border-top-right-radius: 4px;
            }

            &:last-child {
              border-bottom-left-radius: 4px;
              border-bottom-right-radius: 4px;
            }

            &:hover {
              background-color: rgb(235, 238, 245);
            }
          }
        }
      }

      .articleBtn {
        position: absolute;
        right: 220px;
        top: 0;

      }



      .userInfo {
        position: absolute;
        right: 150px;
        top: 0;

        :deep(.el-dropdown)  {
          width: 35px;
          height: 35px;
          right: 0;
          top: 12px;
        }

        img {
          width: 40px;
          height: 40px;
          border-radius: 50%;
          border: 1px solid var(--border-line);
          position: absolute;
        }

      }
    }
  }

}
</style>
